<template>
	<div class="modal-container">
		<div class="search-container">
			<a-select class="select-house" v-model:value="searchVal" style="flex: 1; overflow: hidden" :filter-option="false" :not-found-content="fetching ? undefined : null" :options="selectData" @search="fetchData" show-search placeholder="请输入需要查找的房源地址" allow-clear @change="onSearch">
				<template v-if="fetching" #notFoundContent>
					<a-spin size="small" />
				</template>
			</a-select>
			<a-button type="primary" @click="onSearch">
				<template #icon>
					<SearchOutlined />
				</template>
			</a-button>
		</div>
		<div class="modal-grid">
			<vxe-grid ref="gridRef" v-bind="gridOptions">
				<template #action="{row}">
					<a-button style="margin-right: 10px" :loading="btnDeleteLoading" v-action="['mk_device']" type="primary" size="small" @click="retryAuth(row.id)">重试</a-button>
					<a-button :loading="btnRetryLoading" v-action="['mk_device']" type="danger" size="small" @click="deleteAuth(row.id)">删除</a-button>
				</template>
			</vxe-grid>
		</div>
	</div>
</template>
x
<script setup lang="tsx">
	import { reactive, ref, Ref} from 'vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {getAuthOperationList, deleteAuthOperation, retryAuthOperation} from '@/api/device'
	import {useRequest} from 'vue-request'
	import {SearchOutlined} from '@ant-design/icons-vue'
	import {Modal, message} from 'ant-design-vue'
	import houseApi from '@/api/house-api'
	import {optTypeMap} from './const'
	import XEUtils from 'xe-utils'
	import dayjs from 'dayjs'


	const searchVal = ref(null)

	function useAuthSearch() {
		const fetching = ref(false)
		const selectData = ref([])
		const fetchData = XEUtils.debounce(async (value: string) => {
			selectData.value = []
			fetching.value = true
			const res = await houseApi.searchByAddress({like: value, size: 50, houseType: 0})
			selectData.value = res.data.records.map((v: any) => ({
				value: v.address,
				label: v.address
			}))
			fetching.value = false
		}, 300)
		return {
			fetching,
			fetchData,
			selectData
		}
	}

	function useAuthFail(searchVal: Ref<string>) {
		const gridRef = ref()
		const gridOptions = reactive<VxeGridProps>({
			align: 'center',
			height: 'auto',
			rowConfig: {isHover: true},
			columns: [
				{
					title: '操作',
					width: 120,
					field: 'opType',
					formatter: ({cellValue}) => {
						return optTypeMap[cellValue] || '-'
					}
				},
				{title: '房源地址', field: 'address', formatter: ({cellValue}) => {
					if (!cellValue) return '-'
						return cellValue
				}},
				{title: '入住人', width: 120, field: 'renterName', formatter: ({cellValue}) => {
						if (!cellValue) return '-'
						return cellValue
				}},
				{
					title: '失败内容',
					minWidth: 200,
					field: 'auths',
					slots: {
						default: ({row}) => {
							const auths = row.auths || []

							if (Array.isArray(auths) && auths.length > 0) {
								return auths.map(item => <div>{item.optDetail}</div>)
							}
							return '-'
						}
					}
				},
				{title: '操作时间', width: 200, field: 'time', formatter: ({cellValue}) => {
					if (!cellValue) return '-'
					return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
				}},
				{
					title: '操作',
					align: 'center',
					width: 150,
					slots: {
						default: 'action'
					}
				}
			],
			pagerConfig,
			proxyConfig: {
				props: proxyConfigProps,
				ajax: {
					query({page: {currentPage: current, pageSize: size}}) {
						/** opStatus 为 2 是失败类型 */
						return getAuthOperationList({current, size, opStatus: 2, address: searchVal.value})
					}
				}
			}
		})

		function onSearch() {
			gridRef.value.commitProxy('query')
		}

		const {run: deleteOptRun, loading: btnDeleteLoading} = useRequest(deleteAuthOperation, {manual: true})
		const deleteAuth = async (id: string) => {
			Modal.confirm({
				title: '提示',
				icon: null,
				content: '是否删除?',
				async onOk() {
					await deleteOptRun(id)
					onSearch()
				}
			})
		}

		const {run: retryAuthOpt, loading: btnRetryLoading} = useRequest(retryAuthOperation, {manual: true})
		const retryAuth = async (id: string) => {
			const res = await retryAuthOpt(id)
			res && message.success('操作成功')
			onSearch()
		}

		return {
			gridRef,
			gridOptions,
			deleteAuth,
			btnDeleteLoading,
			retryAuth,
			btnRetryLoading,
			onSearch
		}
	}

	const {gridOptions, deleteAuth, btnDeleteLoading, retryAuth, btnRetryLoading, onSearch, gridRef} = useAuthFail(searchVal)

	const { fetching, selectData, fetchData} = useAuthSearch()
</script>

<style scoped>
	.modal-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.search-container {
		padding-bottom: 12px;
		display: flex;
	}

	.modal-grid {
		flex: 1;
		overflow: hidden;
	}

	.select-house {
		height: 32px;
	}
</style>
